class PlayerUI {
    constructor(player) {
        this.player = player;
        this.initUIElements();
        this.initEventListeners();
    }

    initUIElements() {
        this.controls = document.createElement('div');
        this.controls.className = 'piv-controls';
        
        // 播放控制按钮
        this.playBtn = this.createControlButton('播放', 'play');
        this.progress = this.createProgressBar();
        this.volumeControl = this.createVolumeControl();
        this.fullscreenBtn = this.createControlButton('全屏', 'fullscreen');
        this.timeDisplay = document.createElement('div');
        this.timeDisplay.className = 'piv-time';
        
        this.controls.append(
            this.playBtn,
            this.progress,
            this.volumeControl,
            this.timeDisplay,
            this.fullscreenBtn
        );
        
        this.player.container.appendChild(this.controls);
    }

    createControlButton(text, type) {
        const btn = document.createElement('button');
        btn.className = `piv-${type}-btn`;
        btn.textContent = text;
        return btn;
    }

    createProgressBar() {
        const progress = document.createElement('input');
        progress.type = 'range';
        progress.className = 'piv-progress';
        progress.min = 0;
        progress.max = 100;
        progress.value = 0;
        return progress;
    }

    createVolumeControl() {
        const wrapper = document.createElement('div');
        wrapper.className = 'piv-volume';
        
        const volume = document.createElement('input');
        volume.type = 'range';
        volume.min = 0;
        volume.max = 1;
        volume.step = 0.1;
        volume.value = 1;
        
        wrapper.appendChild(volume);
        return wrapper;
    }

    initEventListeners() {
        this.playBtn.addEventListener('click', () => {
            this.player.video.paused ? this.player.API.play() : this.player.API.pause();
        });
        
        this.progress.addEventListener('input', (e) => {
            const duration = this.player.video.duration || 0;
            this.player.API.seek((e.target.value / 100) * duration);
        });
        
        this.volumeControl.querySelector('input').addEventListener('input', (e) => {
            this.player.API.setVolume(e.target.value);
        });
        
        this.fullscreenBtn.addEventListener('click', () => {
            this.player.API.toggleFullscreen();
        });
        
        this.player.video.addEventListener('timeupdate', () => this.updateProgress());
    }

    updateProgress() {
        const video = this.player.video;
        if (video.duration) {
            const progress = (video.currentTime / video.duration) * 100;
            this.progress.value = progress;
            this.timeDisplay.textContent = `
                ${this.player.API.formatTime(video.currentTime)} / 
                ${this.player.API.formatTime(video.duration)}
            `;
        }
    }
}

export default PlayerUI; // 唯一导出
